<?= $this->Html->script('jquery-ui-1.10.3.min.js', array('inline'=>false)) ?>

<? foreach ($tastes as $groupName => $data): ?>
<h1><?= $groupName ?></h1>
<ul class="list">
    <? foreach ($data as $row): ?>
    <li>
        <h2><?= $row['Taste']['name'] ?></h2>
        <span class="image"><?= $this->Html->image('ukusi/' . $row['Taste']['image'] . '?h=150') ?></span>
        <span class="shadow"></span>
        <? if (!empty($row['Taste']['description'])): ?>
            <div class="mask"><p><?= $row['Taste']['description'] ?></p></div>
        <? endif ?>
    </li>
    <? endforeach ?>
</ul>
<? endforeach ?>

<script type="text/javascript">
var ease  = 'easeOutExpo';
$('.list > li')
    .mouseenter(function(){
        $('.list > li p').stop().animate({top:-200}, 100);
        $(this).addClass('hover');
        $(this).find('p').animate({
            top: 0
        }, {
            duration: 600,
            easing: ease
        });
    })
    .mouseleave(function(){
        $(this).removeClass('hover');
        $(this).find('p').animate({
            top: -200
        }, {
            duration: 300,
            easing: ease
        });
    });
</script>
